<template>
  <el-card>
    <div class="planlist-container-box">
      <el-dialog title="详情页" :visible.sync="logvisible">
        <el-table :data="detailData" :fit="false" style="width: 100%">
          <el-table-column
            prop="tyAssetNumber"
            label="退役退役资产编号"
            show-overflow-tooltip
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="projectNumber"
            label="项目编号"
            show-overflow-tooltip
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="entryName"
            label="项目名称"
            show-overflow-tooltip
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="materialDescription"
            label="物料描述"
            show-overflow-tooltip
            width="115"
          >
          </el-table-column>
          <el-table-column
            prop="model"
            label="型号"
            show-overflow-tooltip
            width="115"
          >
          </el-table-column>
          <el-table-column
            prop="capacity"
            label="容量"
            show-overflow-tooltip
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="storageStatus"
            label="入库状态"
            show-overflow-tooltip
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="storageQuantity"
            label="入库数量"
            show-overflow-tooltip
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="deliveryStatus"
            label="出库状态"
            show-overflow-tooltip
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="deliveryQuantity"
            label="出库数量"
            show-overflow-tooltip
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="dispatchStatus"
            label="派单状态"
            show-overflow-tooltip
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="planStatus"
            label="计划状态"
            show-overflow-tooltip
            width="80"
          >
          </el-table-column>
        </el-table>
      </el-dialog>
      <!-- 样式还未完成的弹出层👇 -->
      <el-dialog title="完成状态" :visible.sync="comSvisible">
        <div class="nowstatus">
          <h2>{{ comS }}</h2>
        </div>
        <el-button type="primary" @click="xiugaizhuangtai">修改状态</el-button>
      </el-dialog>
      <!-- 查询弹出层 -->
      <el-dialog title="查询信息" :visible.sync="chaxunVisible">
        <el-table :data="selectedData" style="width: 100%">
          <el-table-column
            prop="tyAssetNumber"
            label="退役退役资产编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="projectNumber"
            label="项目编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="entryName"
            label="项目名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="materialDescription"
            label="物料描述"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="model" label="型号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="capacity" label="容量" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="storageStatus"
            label="入库状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="storageQuantity"
            label="入库数量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="deliveryStatus"
            label="出库状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="deliveryQuantity"
            label="出库数量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="dispatchStatus"
            label="派单状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="planStatus"
            label="计划状态"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </el-dialog>
      <!-- 新建弹出层 -->
      <el-dialog title="新建信息" :visible.sync="xinjianVisible">
        <el-form :model="xinjianFormInfo" :inline="false" label-position="left">
          <el-form-item label="退役资产编号" prop="退役资产编号">
            <el-input
              placeholder="请输入退役资产编号"
              v-model="xinjianFormInfo.tuiyizichanbianhao"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目编号" prop="项目编号">
            <el-input
              placeholder="请输入项目编号"
              v-model="xinjianFormInfo.xiangmubianhao"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目名称" prop="项目名称">
            <el-input
              placeholder="请输入项目名称"
              v-model="xinjianFormInfo.xiangmumingcheng"
            ></el-input>
          </el-form-item>
          <el-form-item prop="物料描述" label="物料描述">
            <el-input
              type="textarea"
              autocomplete="off"
              placeholder="物料描述"
              v-model="xinjianFormInfo.miaoshu"
            ></el-input>
          </el-form-item>
          <el-form-item label="型号" prop="型号">
            <el-input
              autocomplete="off"
              placeholder="请输入型号"
              v-model="xinjianFormInfo.xinghao"
            ></el-input>
          </el-form-item>
          <el-form-item prop="容量" label="容量">
            <el-input
              v-model="xinjianFormInfo.rongliang"
              placeholder="容量"
            ></el-input>
          </el-form-item>
          <el-form-item label="入库状态" prop="入库状态">
            <el-select
              placeholder="请选择入库状态"
              v-model="xinjianFormInfo.rukuzhuangtai"
            >
              <el-option value="1" label="已入库"></el-option>
              <el-option value="0" label="未入库"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入库数量" prop="入库数量">
            <el-input
              v-model="xinjianFormInfo.rukushuliang"
              placeholder="入库数量"
            ></el-input>
          </el-form-item>
          <el-form-item label="出库状态" prop="出库状态">
            <el-select
              placeholder="请选择派单状态"
              v-model="xinjianFormInfo.chukuzhuangtai"
            >
              <el-option value="1" label="已出库"></el-option>
              <el-option value="0" label="未出库"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出库数量" prop="出库数量">
            <el-input
              v-model="xinjianFormInfo.chukushuliang"
              placeholder="入库数量"
            ></el-input>
          </el-form-item>
          <el-form-item label="派单状态">
            <el-select
              placeholder="请选择派单状态"
              v-model="xinjianFormInfo.paidanzhuangtai"
            >
              <el-option value="1" label="已派单"></el-option>
              <el-option value="0" label="未派单"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计划状态" prop="计划状态">
            <el-select
              placeholder="请选择计划状态"
              v-model="xinjianFormInfo.jihualeixing"
            >
              <el-option value="1" label="已完成"></el-option>
              <el-option value="0" label="未完成"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="xinjiantijiao">提交</el-button>
      </el-dialog>
      <!-- 派单记录 -->
      <el-dialog title="派单记录" :visible.sync="paidanjiluVisible">
        <el-table :data="paidanData" style="width: 100%">
          <el-table-column
            prop="tyAssetNumber"
            label="退役退役资产编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="projectNumber"
            label="项目编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="entryName"
            label="项目名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="materialDescription"
            label="物料描述"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="model" label="型号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="capacity" label="容量" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="storageStatus"
            label="入库状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="storageQuantity"
            label="入库数量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="deliveryStatus"
            label="出库状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="deliveryQuantity"
            label="出库数量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="dispatchStatus"
            label="派单状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="planStatus"
            label="计划状态"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </el-dialog>
      <!-- 完单记录 -->
      <el-dialog title="完单记录" :visible.sync="wandanjiluVisible">
        <el-table :data="wandanData" style="width: 100%">
          <el-table-column
            prop="tyAssetNumber"
            label="退役退役资产编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="projectNumber"
            label="项目编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="entryName"
            label="项目名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="materialDescription"
            label="物料描述"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="model" label="型号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="capacity" label="容量" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="storageStatus"
            label="入库状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="storageQuantity"
            label="入库数量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="deliveryStatus"
            label="出库状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="deliveryQuantity"
            label="出库数量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="dispatchStatus"
            label="派单状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="planStatus"
            label="计划状态"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </el-dialog>
      <!-- 表上工具条 -->
      <div class="toolbar">
        <div class="form-container-box">
          <el-form inline :model="toolbarFormInfo">
            <el-form-item label="资产编号" prop="tuiyizichanbianhao">
              <el-input
                placeholder="退役资产编号"
                v-model="toolbarFormInfo.tuiyizichanbianhao"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目编号" prop="xiangmubianhao">
              <el-input
                placeholder="请输入项目编号"
                v-model="toolbarFormInfo.xiangmubianhao"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目名称" prop="xiangmumingcheng">
              <el-input
                placeholder="请输入项目名称"
                v-model="toolbarFormInfo.xiangmumingcheng"
              ></el-input>
            </el-form-item>
            <el-form-item label="完成状态" prop="wanchengzhuangtai">
              <el-select
                placeholder="请选择完成状态"
                v-model="toolbarFormInfo.wanchengzhuangtai"
              >
                <el-option value="1" label="已完成"></el-option>
                <el-option value="0" label="未完成"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn-container-box">
          <el-button
            class="addUser"
            size="mini"
            icon="el-icon-search"
            @click="chaxun"
            >查询</el-button
          >
          <el-button
            class="rePassword"
            size="mini"
            icon="el-icon-refresh-right"
            @click="chongzhi"
            >重置</el-button
          >
          <el-button
            class="addUser"
            size="mini"
            icon="el-icon-plus"
            @click="xinjian"
            >新建</el-button
          >
          <el-button
            class="detail"
            size="mini"
            icon="el-icon-circle-check"
     
            @click="paidanjilu"
            >派单记录</el-button
          >
          <el-button
            class="detail"
            size="mini"
            icon="el-icon-circle-check"
     
            @click="wandanjilu"
            >完单记录</el-button
          >
        </div>
      </div>
      <div class="tag">
        <el-tag color="#ffc0cb5a">已选择&nbsp;{{ selectLen }}&nbsp;条</el-tag>
      </div>
      <!-- 表 -->
      <div class="table">
        <el-table
          :header-cell-style="{ 'text-align': 'center' }"
          :data="tableData"
          border
          :cell-style="{ height: '60px', padding: '3px' }"
          :row-style="{ height: '25px' }"
          style="width: 100%"
          stripe
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column
            prop="tyAssetNumber"
            label="退役资产编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="projectNumber"
            label="项目编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="entryName"
            label="项目名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="materialDescription"
            label="物料描述"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="model" label="型号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="capacity" label="容量" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="storageStatus"
            label="入库状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="storageQuantity"
            label="入库数量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="deliveryStatus"
            label="出库状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="deliveryQuantity"
            label="出库数量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="dispatchStatus"
            label="派单状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="planStatus"
            label="计划状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button @click="detail(scope.row)" class="addUser" size="mini"
                >详情</el-button
              >
              <el-button
               class="rePassword" size="mini"
                @click="del(scope.$index, tableData)"
                >删除</el-button
              >
              <el-button
               class="detail" size="mini"
                @click="state(tableData, scope.$index)"
                >计划状态</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="page"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination></div
  ></el-card>
</template>
<script>
import plan from "@/api/planB";

export default {
  created() {
    plan.getAllPlanList().then((res) => {
      let planListAll = res.data.data.success;
      // 处理数据
      planListAll.forEach((item) => {
        if (item.storageStatus === 0) {
          item.storageStatus = "未入库";
        } else {
          item.storageStatus = "已入库";
        }
        if (item.deliveryStatus === 0) {
          item.deliveryStatus = "未出库";
        } else {
          item.deliveryStatus = "已出库";
        }
        if (item.dispatchStatus === 0) {
          item.dispatchStatus = "未派单";
        } else {
          item.dispatchStatus = "已派单";
        }
        if (item.planStatus === 0) {
          item.planStatus = "未完成";
        } else {
          item.planStatus = "已完成";
        }
      });
      this.$data.data = planListAll;
      this.total = planListAll.length;
    });
  },
  data() {
    return {
      // 表单数据
      toolbarFormInfo: {
        tuiyizichanbianhao: "",
        xiangmubianhao: "",
        xiangmumingcheng: "",
        wanchengzhuangtai: "",
      },
      // 假数据
      data: [],
      // 详情数据
      detailData: [],
      //查询到的数据
      selectedData: [],
      // 派单记录
      paidanData: [],
      // 完单记录
      wandanData: [],
      // 弹出层参数
      // 查询页面
      chaxunVisible: false,
      // 新建触发的弹出层
      xinjianVisible: false,
      // 派单记录
      paidanjiluVisible: false,
      // 完单记录
      wandanjiluVisible: false,
      // 详情页面
      logvisible: false,
      // 状态页
      comSvisible: false,

      xinjianFormInfo: {
        jihualeixing: "",
        xiangmubianhao: 0,
        tuiyizichanbianhao: 0,
        xiangmumingcheng: "",
        miaoshu: "",
        rongliang: "",
        xinghao: "",
        rukuzhuangtai: "",
        rukushuliang: 0,
        chukuzhuangtai: "",
        chukushuliang: 0,
        paidanzhuangtai: "",
      },
      // 完成状态
      comState: 0,
      comS: "",
      // 完成状态点击时的行的索引
      currRowIndex: 0,
      // 分页
      // 数据总条数
      total: 0,
      pageSize: 10,
      page: 1,
      multipleSelection: [],
      selectLen: 0,
    };
  },
  methods: {
    // 详情
    detail(row) {
      this.detailData = [row];
      this.logvisible = true;
    },
    // 删除
    del(index, row) {
      // 删除行
      let i = row[index].id;
      row.splice(index, 1);
      // axios后端中删除此列
      plan.delete(i);
    },
    // 完成状态
    state(row, index) {
      this.comS = row[index].planStatus;
      this.currRowIndex = index;
      this.comSvisible = true;
    },
    xiugaizhuangtai() {
      this.comSvisible = false;
      let id = this.tableData[this.currRowIndex].id;
      let planStatus = 0;
      // 简易的，无后端的
      if (this.tableData[this.currRowIndex].planStatus === "未完成") {
        this.tableData[this.currRowIndex].planStatus = "已完成";
        planStatus = 1;
      } else {
        this.tableData[this.currRowIndex].planStatus = "未完成";
        planStatus = 0;
      }
      let data = {
        id: id,
        planStatus: planStatus,
      };
      plan.setPlanStatus(data).then((res) => {
        this.$message.success("状态修改成功");
      });
    },
    // 获取当前页数
    pageChange(e) {
      this.page = e;
    },
    sizeChange(e) {
      this.pageSize = e;
    },
    // 查询
    chaxun() {
      let realData = new Object();
      let data = {
        tyAssetNumber: this.toolbarFormInfo.tuiyizichanbianhao,
        projectNumber: this.toolbarFormInfo.xiangmubianhao,
        projectname: this.toolbarFormInfo.xiangmumingcheng,
        planStatus: this.toolbarFormInfo.wanchengzhuangtai,
      };
      Object.keys(data).forEach((key) => {
        if (data[key] !== "") {
          realData[key] = data[key];
        }
      });
      plan.selectPlanList(realData).then((res) => {
        this.selectedData = res.data.data.success;
        this.selectedData.forEach((item) => {
          if (item.storageStatus === 0) {
            item.storageStatus = "未入库";
          } else {
            item.storageStatus = "已入库";
          }
          if (item.deliveryStatus === 0) {
            item.deliveryStatus = "未出库";
          } else {
            item.deliveryStatus = "已出库";
          }
          if (item.dispatchStatus === 0) {
            item.dispatchStatus = "未派单";
          } else {
            item.dispatchStatus = "已派单";
          }
          if (item.planStatus === 0) {
            item.planStatus = "未完成";
          } else {
            item.planStatus = "已完成";
          }
        });
      });
      this.chaxunVisible = true;
    },
    // 重置
    chongzhi() {
      (this.toolbarFormInfo.tuiyizichanbianhao = ""),
        (this.toolbarFormInfo.xiangmubianhao = ""),
        (this.toolbarFormInfo.xiangmumingcheng = ""),
        (this.toolbarFormInfo.wanchengzhuangtai = "");
    },
    // 新建
    xinjian() {
      this.xinjianVisible = true;
    },
    // 新建表单提交
    xinjiantijiao() {
      this.xinjianVisible = false;
      // 在这里提交axios请求
      let newdata = {
        tyAssetNumber: this.xinjianFormInfo.tuiyizichanbianhao,
        deliveryQuantity: this.xinjianFormInfo.chukushuliang,
        deliveryStatus: this.xinjianFormInfo.chukuzhuangtai,
        dispatchStatus: this.xinjianFormInfo.paidanzhuangtai,
        planStatus: this.xinjianFormInfo.jihuazhuangtai,
        entryName: this.xinjianFormInfo.xiangmumingcheng,
        projectNumber: this.xinjianFormInfo.xiangmubianhao,
        storageQuantity: this.xinjianFormInfo.rukushuliang,
        storageStatus: this.xinjianFormInfo.rukuzhuangtai,
        materialDescription: this.xinjianFormInfo.miaoshu,
        model: this.xinjianFormInfo.xinghao,
        capacity: this.xinjianFormInfo.rongliang,
      };
      this.tableData.push(newdata);
      plan
        .newPlanList(newdata)
        .then((res) => {
          this.$message.success("新建条目成功");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 派单记录
    paidanjilu() {
      this.paidanjiluVisible = true;
      plan.dispatch().then((res) => {
        this.paidanData = res.data.data.result;
        this.paidanData.forEach((item) => {
          if (item.storageStatus === 0) {
            item.storageStatus = "未入库";
          } else {
            item.storageStatus = "已入库";
          }
          if (item.deliveryStatus === 0) {
            item.deliveryStatus = "未出库";
          } else {
            item.deliveryStatus = "已出库";
          }
          if (item.dispatchStatus === 0) {
            item.dispatchStatus = "未派单";
          } else {
            item.dispatchStatus = "已派单";
          }
          if (item.planStatus === 0) {
            item.planStatus = "未完成";
          } else {
            item.planStatus = "已完成";
          }
        });
      });
    },
    // 完单记录
    wandanjilu() {
      this.wandanjiluVisible = true;
      plan.getPlanStatus().then((res) => {
        this.wandanData = res.data.data.completed;
        this.wandanData.forEach((item) => {
          if (item.storageStatus === 0) {
            item.storageStatus = "未入库";
          } else {
            item.storageStatus = "已入库";
          }
          if (item.deliveryStatus === 0) {
            item.deliveryStatus = "未出库";
          } else {
            item.deliveryStatus = "已出库";
          }
          if (item.dispatchStatus === 0) {
            item.dispatchStatus = "未派单";
          } else {
            item.dispatchStatus = "已派单";
          }
          if (item.planStatus === 0) {
            item.planStatus = "未完成";
          } else {
            item.planStatus = "已完成";
          }
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let len = this.multipleSelection.length;
      this.selectLen = len;
    },
  },

  // 分页计算
  computed: {
    tableData: function () {
      return this.data.slice(
        (this.page - 1) * this.pageSize,
        this.pageSize * this.page
      );
    },
  },
};
</script>
<style scoped>
.planlist-container-box {
  background: rgb(255, 255, 255);
}
/* 工具条 */
.form-container-box .el-form {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  margin-left: 10px;
}
.form-container-box .el-form >>> .el-form-item__label {
  padding: 0 8px 0 0;
  font-size: 12px;
}
.el-table {
  margin-top: 20px;
  text-align: center;
}
.el-input {
  width: 150px;
}
.el-select {
  width: 150px;
}
.el-input--suffix .el-input__inner {
  padding: 0;
}
.btn-container-box .el-button {
  margin-right: 20px;
  margin-left: 5px;
}
.btn-container-box .bgcolor {
  margin-right: 20px;
  background-color: #00ced1;
}
.cell {
  text-align: center;
}
.el-pagination {
  margin-top: 25px;
  float: right;
}
.tag .el-tag {
  width: 90%;
  font-size: 18px;
  letter-spacing: 0.25em;
  color: #ffa4b3;
  margin: 10px;
}
.nowstatus {
  margin: 0 auto;
}
</style>